<template>
	<view
		:style="[
			props.direction == 'horizontal'
				? {
						width: props.width + 'px',
						height: props.size + 'rpx',
						left: props.x + 'px',
						top: -props.size + 'rpx'
				  }
				: { height: props.width + 'px', width: props.size + 'rpx', top: props.x + 'px' }
		]"
		:class="['relative', props.direction == 'horizontal' ? 'flex flex-col' : 'flex flex-row absolute']"
	>
		<tm-sheet
			:followTheme="props.followTheme"
			:round="10"
			unit="px"
			:color="props.color"
			linear="right"
			:width="props.direction == 'horizontal' ? props.width : _sizePx"
			:height="props.direction == 'horizontal' ? _sizePx : props.width"
			:margin="[0, 0]"
			:padding="[0, 0]"
		></tm-sheet>
	</view>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import tmSheet from '../tm-sheet/tm-sheet.vue'
const props = defineProps({
	//是否跟随全局主题的变换而变换
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	size: {
		type: Number,
		default: 6
	},
	x: {
		type: Number,
		dfault: 0
	},
	width: {
		type: Number,
		dfault: 0
	},
	color: {
		type: String,
		default: 'primary'
	},
	/**
	 * 方向
	 * horizontal:水平,
	 * vertical:竖向。
	 */
	direction: {
		type: String,
		default: 'vertical'
	}
})
const _sizePx = computed(() => uni.upx2px(props.size))
</script>
